import { useState } from "react";
import styles from './index.less';
import { FloatButton, Button } from 'antd';
import { UnorderedListOutlined, CaretRightOutlined } from '@ant-design/icons';

import BaseTable from "./pages/TablePage";
import PivotTable from "./pages/PivotPage";

type Tab = {
    key: string,
    name: string,
    component: any,
};

const TABS: Tab[] = [
    {
        key: 'baseTable',
        name: '明细表',
        component: BaseTable,
    },
    {
        key: 'pivot',
        name: '透视表',
        component: PivotTable,
    },
];

export default () => {

    const [tab, setTab] = useState<Tab>(TABS[0]);

    return (
        <div className={styles.container}>
            <FloatButton.Group
                trigger="click"
                type="primary"
                style={{
                    position: 'absolute',
                    width: 40,
                    height: 40,
                    top: 24,
                    left: 24,
                }}
                icon={<UnorderedListOutlined />}
                placement='bottom'
            >
                {TABS.map((i, index) => (
                    <Button
                        key={`${i.key}-${index}`}
                        style={{ width: 76, gap: 0}} icon={<CaretRightOutlined />}
                        onClick={() => setTab(i)}
                    >
                        {i.name}
                    </Button>
                ))}
            </FloatButton.Group>

            <div className={styles.contentWrapper}>
                <tab.component/>
            </div>
        </div>
    );
}
